<template>
  <div class="users">
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 标题 -->
      <div slot="header" class="clearfix">
        <span>用户列表</span>
        <!-- <el-button
          style="float: right; padding: 3px 0"
          type="text"
        >添加用户 </el-button> -->
        <el-button
          class="qf-r qf-create-btn"
          type="primary"
          round
          @click="jump('/users/create')"
          >添加用户</el-button
        >
      </div>
      <!-- 标题 -->

      <!-- 筛选内容 -->
      <div class="search">
        <el-input
          placeholder="请输入用户名"
          v-model="params.uname"
          class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>

        <el-date-picker
          v-model="params.date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <!-- 筛选内容 -->

      <!-- 表格内容 -->
      <QfTable :tableData="tableData" :columns="columns"></QfTable>
      <!-- 表格内容 -->

      <!-- 分页 -->

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pagenum"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
      <!-- 分页 -->
    </el-card>
    <!-- dialog -->
    <Edit :state="editState" @close="editState = false"></Edit>
    <EditRole :state="editRoleState" @close="editRoleState = false"></EditRole>
    <!-- dialog end -->
  </div>
</template>

<script>
import QfTable from '@/components/qf-table/Index.vue';
import tableData from '~mock/users/index';
import Edit from './components/Edit.vue';
import EditRole from './components/EditRole.vue';
export default {
  components: {
    QfTable,
    Edit,
    EditRole
  },
  data() {
    return {
      // 编辑数据
      editState: false,
      editRoleState: false,
      params: {
        // 分页
        pagenum: 1,
        // 搜索
        uname: '',
        date: []
      },

      // 表格数据
      columns: [
        { title: '编号', field: 'id' },
        { title: '所属角色', field: 'role_name' },
        { title: '用户名', field: 'uname' },
        { title: '手机号', field: 'mobile' },
        // { title: '冻结', field: 'state' },
        {
          title: '冻结',
          type: 'switch',
          payload: {
            field: 'state',
            change: (row) => console.log('冻结', row)
          }
        },
        { title: '更新于', field: 'update_time', width: '240' },
        {
          title: '操作',
          type: 'btn',
          width: '280',
          payload: [
            {
              name: '修改用户',
              type: 'primary',
              click: (row) => {
                console.log('修改', row);

                // 首先显示弹框
                this.editState = true;
                // 然后
              }
            },
            {
              name: '分配角色',
              type: 'warning',
              click: (row) => {
                console.log('分配', row);

                // 首先显示弹框
                this.editRoleState = true;
                // 然后
              }
            },
            {
              name: '删除用户',
              type: 'danger',
              click: (row) => this.deleteFn(row)
            }
          ]
        }
      ],
      tableData: tableData.data
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    deleteFn(row) {
      console.log('删除', row);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
// .history {
//   width: 100%;
//   height: 100%;

//   .el-card {
//     width: 96%;
//     margin: auto;

//     .search {
//       display: flex;
//       justify-content: space-between;
//       margin-bottom: 30px;
//       .el-input {
//         width: 300px;
//       }
//     }
//     .el-table {
//       text-align: center;
//     }
//     .el-pagination {
//       background: #ebeef5;
//       width: 100%;
//       padding: 10px 0;
//       text-align: center;
//       padding-right: 10px;
//       margin-top: 10px;
//       box-sizing: border-box;
//     }
//   }
// }
//
//
</style>
